<template>
  <div>
    <el-row>
      <baidu-map
        ak="BtlOZVRPJIHiDdUst7G5gNdmlztVlax8"
        :center="center"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
        :style="'width: 100%; min-height: 350px;height:'+(pageHeight-454)+'px;'">
        <bm-marker :position="{lng: 103.918467, lat: 30.82866}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
      </baidu-map>
    </el-row>
  </div>
</template>
<script>
import baiduMap from 'vue-baidu-map/components/map/Map.vue'
import { BmMarker } from 'vue-baidu-map'
export default {
  components: {
    baiduMap,
    BmMarker
  },
  data () {
    return {
      center: '成都市郫都区现代工业港北片区长生桥路889号',
      zoom: 19,
      pageHeight: 0
    }
  },
  mounted () {
    this.getPageHeight()
    // 监控浏览器大小变化，调整页面的布局
    window.onresize = () => {
      this.getPageHeight()
    }
  },
  methods: {
    getPageHeight () {
      this.pageHeight = window.innerHeight
    }
  }
}
</script>
<style scoped lang="less">
</style>
